<template>
    <view>
        <!-- 自定义nvabar s -->
        <view class="box" :style="{height: getMenuButtonInfoHeight + getMenuButtonInfoTop + 6 + 'px'}">
            <view class="Navheader">
                <view class="status_bar"
                    :style="{height: getMenuButtonInfoHeight +'px', marginTop: getMenuButtonInfoTop + 'px', lineHeight: getMenuButtonInfoHeight + 'px'}">
                    <text>{{title}}</text>
                </view>
            </view>
        </view>
        <!-- 自定义nvabar e-->
    </view>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: ''
            }
        },
        created() {
            this.getMenuButtonInfo()
        },
        data() {
            return {
                // 悬浮按钮距离顶部的距离
                getMenuButtonInfoTop: 0,
                // 悬浮自身的高度
                getMenuButtonInfoHeight: 0
            }
        },
        methods: {
            // 根据右侧悬浮框来展示自适应高度
            getMenuButtonInfo() {
                let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
                this.getMenuButtonInfoTop = menuButtonInfo.top
                this.getMenuButtonInfoHeight = menuButtonInfo.height
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        position: relative;
        background-color: #FFFFFF;;
    }

    .Navheader {
        position: fixed;
        width: 100%;
        z-index: 114514;
        background-color: #FFFFFF;
        padding-bottom: 12rpx;
    }

    .status_bar {
        text-align: center;
        width: 100%;
        font-size: 36rpx;
        color: #191919;
    }
</style>
